<template>
  <div>
    <a-form layout="inline" class="default-search-form" :form="form" @submit="handleSearch">
      <a-row :gutter="8">
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="线程名称">
            <a-input v-decorator="['threadName']" placeholder="线程名称"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item :colon="false" label="线程状态">
            <a-input v-decorator="['threadState']" placeholder="线程状态"/>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8">
          <a-form-item class="gb-search-button">
            <a-button class="item" v-if="funcs['ThreadSearch']" type="primary" html-type="submit">
              {{ $t(funcs['ThreadSearch']) }}
            </a-button>
            <a-button type="primary" class="item" @click="handleReset">
              {{ $t('reset') }}
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table :columns="columns"
      :rowKey="record => record.threadId"
      :dataSource="data"
      :pagination="false"
      :loading="loading"
      size="small"
      :scroll="{ x: 800 }"
    >
      <div class="table-single-operations" slot="action" slot-scope="text, record">
        <ThreadView v-if="funcs['ThreadView']" class="item" :text="$t(funcs['ThreadView'])" :row="record" />
        <ThreadInterrupt v-if="funcs['ThreadInterrupt']" class="item" :text="$t(funcs['ThreadInterrupt'])" :row="record" :callback="handleSearch" />
      </div>
    </a-table>
  </div>
</template>
<script>
import axios from 'axios'
import common from '@/global/common.js'

export default {
  data() {
    return {
      form: this.$form.createForm(this, {name: this._uid}),
      data: [],
      loading: true,
      funcs: common.getVisibleFunc('ThreadList'),
    }
  },
  computed: {
    columns() {
      const columns = [
        { title: '线程名称', dataIndex: 'threadName', sorter: (a, b) => common.stringSort(a.threadName, b.threadName), key: 'threadName', customRender: (text) => { return <LongTableColumn>{text}</LongTableColumn> }, width: 200 },
        { title: '线程状态', dataIndex: 'threadState', sorter: (a, b) => common.stringSort(a.threadState, b.threadState), key: 'threadState', width: 100 },
        { title: this.$t("action"), key: 'action', scopedSlots: { customRender: 'action' }, width: 120, fixed: 'right', }
      ]
      return columns
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    handleSearch (e) {
      if(e){
        e.preventDefault()
      }
      this.fetch()
    },
    handleReset () {
      this.form.resetFields()
      this.handleSearch()
    },
    fetch (param = {}) {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return
        }
        this.loading = true
        axios({
          method: 'get',
          url: '/infra/thread/find',
          params: {
            ...param,
            ...formValue
          },
        }).then((res) => {
          this.data = res.data.rows
        }).catch(() => {
          
        }).finally(() => {
          this.loading = false
        })
      })
    },
  },
}
</script>